<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>交互式粒子动画背景</title>
    <style>
      body {
        /* background: linear-gradient(
          135deg,
          #1a1a2e 0%,
          #16213e 50%,
          #0f3460 100%
        ); */
        background-image: radial-gradient(
          circle,
          #ffffff 1px,
          #f6f7f8 1px
        ) !important;
        background-size: 20px 20px;
        background-position: center center;
        min-height: 100vh;
        /* display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        color: #fff;
        position: relative; */
      }

      #particle-canvas {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
      }
    </style>
  </head>
  <body>
    <canvas id="particle-canvas"></canvas>

    <script>
      // 获取Canvas元素和上下文
      const canvas = document.getElementById("particle-canvas");
      const ctx = canvas.getContext("2d");

      // 设置Canvas大小为窗口大小
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      // 粒子数组
      const particles = [];
      const particleCount = 100;

      // 鼠标位置
      const mouse = {
        x: null,
        y: null,
        radius: 100,
      };

      // 监听鼠标移动
      //   window.addEventListener("mousemove", (event) => {
      //     mouse.x = event.x;
      //     mouse.y = event.y;
      //   });

      // 监听鼠标离开窗口
      //   window.addEventListener("mouseout", () => {
      //     mouse.x = undefined;
      //     mouse.y = undefined;
      //   });

      // 监听窗口大小变化
      window.addEventListener("resize", () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
      });

      // 监听点击事件创建粒子爆发
      //   window.addEventListener("click", (event) => {
      //     createParticleExplosion(event.x, event.y, 30);
      //   });

      // 创建粒子类
      class Particle {
        constructor(x, y) {
          this.x = x;
          this.y = y;
          this.size = Math.random() * 5 + 1;
          this.weight = Math.random() * 2 + 1;
          this.directionX = Math.random() * 2 - 1;
            // this.color = `hsla(${Math.random() * 360}, 70%, 60%, 0.8)`;
          this.color = `#E5ECF7`;
        }

        update() {
          // 粒子随鼠标移动
          //   if (mouse.x !== undefined && mouse.y !== undefined) {
          //     const dx = mouse.x - this.x;
          //     const dy = mouse.y - this.y;
          //     const distance = Math.sqrt(dx * dx + dy * dy);

          //     if (distance < mouse.radius) {
          //       const force = (mouse.radius - distance) / mouse.radius;
          //       this.x -= dx * force * 0.05;
          //       this.y -= dy * force * 0.05;
          //     }
          //   }

          // 粒子运动
          if (this.y > canvas.height) {
            this.y = 0;
            this.x = Math.random() * canvas.width;
          }

          this.y += this.weight;
          this.x += this.directionX;
        }

        draw() {
          ctx.fillStyle = this.color;
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
          ctx.closePath();
          ctx.fill();
        }
      }

      // 初始化粒子
      function init() {
        for (let i = 0; i < particleCount; i++) {
          const x = Math.random() * canvas.width;
          const y = Math.random() * canvas.height;
          particles.push(new Particle(x, y));
        }
      }

      // 创建粒子爆发效果
      //   function createParticleExplosion(x, y, count) {
      //     for (let i = 0; i < count; i++) {
      //       particles.push(new Particle(x, y));
      //     }
      //   }

      // 绘制粒子间的连线
      //   function drawLines() {
      //     for (let i = 0; i < particles.length; i++) {
      //       for (let j = i; j < particles.length; j++) {
      //         const dx = particles[i].x - particles[j].x;
      //         const dy = particles[i].y - particles[j].y;
      //         const distance = Math.sqrt(dx * dx + dy * dy);

      //         if (distance < 100) {
      //           ctx.beginPath();
      //           ctx.strokeStyle = `hsla(${Math.random() * 360}, 70%, 60%, ${
      //             0.2 * (1 - distance / 100)
      //           })`;
      //           ctx.lineWidth = 0.5;
      //           ctx.moveTo(particles[i].x, particles[i].y);
      //           ctx.lineTo(particles[j].x, particles[j].y);
      //           ctx.stroke();
      //         }
      //       }
      //     }
      //   }

      // 动画循环
      function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        for (let i = 0; i < particles.length; i++) {
          particles[i].update();
          particles[i].draw();
        }

        // drawLines();

        // 如果粒子太多，移除一些
        if (particles.length > 500) {
          particles.splice(0, 50);
        }

        requestAnimationFrame(animate);
      }

      // 启动动画
      init();
      animate();
    </script>
  </body>
</html>
